<template>
    <div class="sidebar">
                        <ul class="menulist">
                            <SidebarList v-for="item in broad_headings" :itemprop="item" :key="item.id">{}</SidebarList>
                        </ul>

                    </div>

</template>
<script>
import SidebarList from './SidebarList.vue'
export default {
  name: 'Sidebar',
  data(){
      return{
        broad_headings:[
            {id:"01",name:"设备管理"},
            {id:"02",name:"工作管理"},
            {id:"03",name:"项目管理"},
            {id:"04",name:"学术厅"},
            {id:"05",name:"还没想好"}
        ]
      }
  },
  components: {
    SidebarList
  }
}
</script>
<style >
.sidebar{
            
            width: 188px;
            background-color: rgb(50, 65, 87);
            height: 100%;
            position:absolute;
            top:70px;
            color:rgb(191, 203, 217);
            font-size: 15px;
            padding-top: 15px;
        }
.menulist{

            height: 100%;
            cursor: pointer;
        }
        
        .menuitem{
            height: 56px;
            line-height: 56px;
            padding-left: 30px;
            position: relative;
            text-align: left;
            

        }
        .menuitem:hover{
            background-color: #242f42;
        }
        .isopened{
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
        }
</style>
